<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI GPT-4 Chat (jQuery AJAX)</title>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function startChat() {
            var userMessage = $('#userMessage').val();  // 获取用户输入
            var chatBox = $('#chatBox');  // 获取文本域

            // 清空文本域
            chatBox.val('');

            // 发送AJAX请求到后端
            $.ajax({
                url: `/chat/chat1/${encodeURIComponent(userMessage)}`,
                method: 'POST',  // 使用GET请求
                success: function(data) {
                    // 成功后将返回的数据插入到文本域中
                    chatBox.val(data);
                    chatBox.scrollTop(chatBox[0].scrollHeight);  // 滚动到最新的消息
                },
                error: function(xhr, status, error) {
                    console.error('Error occurred while fetching:', error);
                }
            });
        }
    </script>
</head>
<body>
<h1>OpenAI GPT-4 Chat (jQuery AJAX)</h1>

<!-- 用户输入框 -->
<div>
    <label for="userMessage">请输入消息:</label>
    <input type="text" id="userMessage" placeholder="请输入与GPT-4聊天的内容" />
    <button onclick="startChat()">发送消息</button>
</div>
<div>
    <a href="/audio.html">音频转文本</a>
    <a href="/snake.html">snake游戏</a>
    <a href="/multimodal.html">多模态对话</a>
</div>

<!-- 显示响应的文本域 -->
<div>
    <h2>响应内容:</h2>
    <textarea id="chatBox" rows="10" cols="80" readonly></textarea>
</div>
</body>
</html>
